<template>
  <div class="sdtjBox">
    <div>
      <el-button class="btn btn2" type="primary" @click="comeBack">返回</el-button>
    </div>
    <el-row>
      <el-col :span="12">
        <div>设备在线数量统计</div>
        <div>
          <div class="sbzxsltjBox">
            <div>
              <el-form ref="elForm" :model="formData" size="medium" label-width="1.4rem">
                <el-row :gutter="5" class="elFromBox">
                  <el-col :span="8">
                    <el-form-item label="旗县:" prop="time">
                      <el-select
                        v-model="formData.counties"
                        placeholder
                        clearable
                        :style="{ width: '100%' }"
                        filterable
                      >
                        <el-option
                          v-for="(item, index) in bdzmc"
                          :key="index"
                          :label="item.stationName"
                          :value="item.stationId"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="变电站名称:" prop="time">
                      <el-select
                        v-model="formData.substation"
                        placeholder
                        clearable
                        :style="{ width: '100%' }"
                        filterable
                      >
                        <el-option
                          v-for="(item, index) in bdzmc"
                          :key="index"
                          :label="item.stationName"
                          :value="item.stationId"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="时间:" prop="time">
                      <el-select
                        v-model="formData.OnlineTime"
                        placeholder
                        clearable
                        :style="{ width: '100%' }"
                        filterable
                      >
                        <el-option
                          v-for="(item, index) in bdzmc"
                          :key="index"
                          :label="item.stationName"
                          :value="item.stationId"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <div>
              <div>
                <v-chart id="sbOnlineChart" :options="newOnlineChartOption" :auto-resize="true" />
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div>环境信息最值统计</div>
        <div>
          <v-chart :options="newOption" :auto-resize="true" />
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div>设备在线率统计</div>
        <div>
          <div class="sbzxltjBox">
            <div>
              <el-button type="primary">按日</el-button>
              <el-button type="primary">按周</el-button>
              <el-button type="primary">按月</el-button>
              <el-button type="primary">按季</el-button>
              <el-button type="primary">按年</el-button>
              <el-button type="primary">导出</el-button>
            </div>
          </div>
          <div class="bigTableStyle">
            <!-- @selection-change="handleSelectionChange" -->
            <el-table
              border
              :data="tableData"
              height="95%"
              :row-class-name="tableRowClassName"
              style="width: 100%;"
            >
              <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
              <el-table-column
                align="center"
                prop="sblx"
                label="设备类型"
                :show-overflow-tooltip="true"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="yxzsc"
                label="运行总时长"
                width="180"
                :show-overflow-tooltip="true"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="zxsj"
                label="在线时间"
                :show-overflow-tooltip="true"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="lxsj"
                label="离线时间"
                :show-overflow-tooltip="true"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="zxl"
                label="在线率"
                min-width="50"
                :show-overflow-tooltip="true"
              ></el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { EChartOption } from "echarts";

@Component
export default class barchart extends Vue {
  comeBack() {
    this.$emit("changeIsToggBack");
  }
  //搜索框from表单数据
  formData = {
    counties: "", //旗县
    substation: "", //变电站
    OnlineTime: "", //时间
  };
  bdzmc = [];
  jclx = [
    { jclxName: "可见光摄像机", jclxId: "0" },
    { jclxName: "红外摄像机", jclxId: "1" },
  ];
  //表格数据
  tableData = [
    {
      sblx: "测试1",
      yxzsc: "12min",
      zxsj: "2020-02-11",
      lxsj: "2020-02-12",
      zxl: "32%",
    },
    {
      sblx: "测试2",
      yxzsc: "12min",
      zxsj: "2020-02-11",
      lxsj: "2020-02-12",
      zxl: "32%",
    },
    {
      sblx: "测试1",
      yxzsc: "12min",
      zxsj: "2020-02-11",
      lxsj: "2020-02-12",
      zxl: "32%",
    },
    {
      sblx: "测试1",
      yxzsc: "12min",
      zxsj: "2020-02-11",
      lxsj: "2020-02-12",
      zxl: "32%",
    },
    {
      sblx: "测试1",
      yxzsc: "12min",
      zxsj: "2020-02-11",
      lxsj: "2020-02-12",
      zxl: "32%",
    },
    {
      sblx: "测试1",
      yxzsc: "12min",
      zxsj: "2020-02-11",
      lxsj: "2020-02-12",
      zxl: "32%",
    },
    {
      sblx: "测试1",
      yxzsc: "12min",
      zxsj: "2020-02-11",
      lxsj: "2020-02-12",
      zxl: "32%",
    },
  ];
  tableRowClassName({ row, rowIndex }: any): string {
    // console.log(row, rowIndex);
    // if (rowIndex % 2 === 0) {
    //   return "row1";
    // } else {
    //   return "row2";
    // }
    return rowIndex % 2 === 0 ? "row1" : "row2";
  }
  public newOnlineChartOption: EChartOption = {
    color: ["#ff7600", "#f5f900"],
    legend: {
      show: true,
      textStyle: {
        color: "#fff",
      },
      bottom: "3%",
      icon: "rect",
      itemHeight: 10,
      itemWidth: 10,
    },
    series: [
      {
        type: "pie",
        radius: "70%",
        center: ["50%", "40%"],
        labelLine: {
          show: false,
        },
        label: {
          show: false,
        },
        data: [
          {
            value: 58,
            name: "在线数量",
          },
          {
            value: 18,
            name: "离线数量",
          },
        ],
      },
    ],
  };
  public option: EChartOption = {
    // title: {
    //   text: "XXXX",
    //   left: "center",
    //   top: "center",
    //   textStyle: {
    //     fontSize: 16,
    //     color: "#fff",
    //     fontWeight: "200",
    //   },
    // },
    color: ["#ff7600", "#f5f900"],
    tooltip: {
      show: true,
      trigger: "axis",
    },
    legend: {
      show: true,
      textStyle: {
        color: "#fff",
      },
      bottom: "3%",
      icon: "line",
      itemHeight: 20,
    },
    grid: {
      top: "6%",
      bottom: "26%",
    },
    xAxis: {
      type: "category",
      data: [
        "2021/1/1",
        "2021/1/2",
        "2021/1/3",
        "2021/1/4",
        "2021/1/5",
        "2021/1/6",
        "2021/1/7",
        "2021/1/8",
        "2021/1/9",
        "2021/1/10",
      ],
      axisLabel: {
        color: "#fff",
        interval: 0,
        rotate: 40,
      },
      axisLine: {
        lineStyle: {
          color: "#ccc",
        },
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: {
      type: "value",
      splitLine: {
        show: true,
        lineStyle: {
          color: "#ccc",
        },
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        color: "#fff",
      },
      axisTick: {
        show: false,
      },
    },

    series: [
      {
        name: "温度",
        type: "line",

        data: [13, 1, 3, 44, 45, 33, 56],
      },
      {
        name: "湿度",
        type: "line",
        data: [13, 23, 33, 24, 85, 233, 86],
      },
    ],
  };
  get newOption() {
    const option = this.option;
    return option;
  }
}
</script>

<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: 100%;
}
.btn {
  //   margin: 0.02rem 0 0 0.4rem;
  width: 0.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn2 {
  height: 0.3rem;
}
.sdtjBox {
  height: 100%;
  position: relative;
  > div:nth-child(1) {
    position: absolute;
    right: 0;
    top: -4%;
  }
  .el-row {
    height: 50%;
    border: 1px solid #ccc;
    .el-col {
      > div:nth-child(1) {
        text-align: center;
        padding: 0.1rem 0;
        // height: 10%;
        border: 1px solid #ccc;
        border-top: none;
      }
      > div:nth-child(2) {
        height: 3.5rem;
        width: 100%;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        .sbzxsltjBox {
          height: 100%;
          > div:nth-child(1) {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 20%;
            padding-right: 0.5rem;
            .elFromBox {
              display: flex;
              border: none;
              .el-form-item {
                border: none;
                margin-left: -0.4rem;
              }
            }
            div {
              flex: 1;
              height: 50%;
            }
          }
          > div:nth-child(2) {
            height: 80%;
            > div:nth-child(1) {
              height: 100%;
            }
          }
        }
        .sbzxltjBox {
          height: 15%;
          display: flex;
          justify-content: left;
          align-items: center;
          > div:nth-child(1) {
            display: flex;
            padding-left: 0.5rem;
            > .el-button:nth-child(6) {
              margin-left: 8.5rem;
            }
          }
        }
        > div:nth-child(2) {
          height: 85%;
          padding: 0 0.2rem;
        }
      }
    }
  }
}
</style>

